<script lang="ts">
import { defineComponent, reactive, ref, watch } from "vue"
import { useI18n } from "vue-i18n";
import { showToast, showDialog, showConfirmDialog } from 'vant';
import { UserModule } from "@/store/modules/user";
import { lpMineModule } from "@/store/modules/lpMine";
import { NFTModule } from "@/store/modules/NFT";
import { toWei, fromWei, formatAddress } from "@/utils/format";
import { IDOModule } from "@/store/modules/IDO";

import Clipboard from "clipboard";

export default defineComponent({
    setup() {
        const { t } = useI18n();
        const loading = ref([false, false])
        const setatTeam = reactive({
            pageNum: 1,
            pageSize: 10,
            total: 0
        });
        const nodeNum = ref()
        const userReward = ref({})
        const userInfo = ref({})
        const dividends = ref()
        const directList = ref([])
        const contractInfo = ref({})
        const loadTeam = async () => {
            try {

                const res = await lpMineModule.getDirectsByPage({
                    pageNum: setatTeam.pageNum - 1,
                    pageSize: setatTeam.pageSize,
                });
                directList.value = []
                for (let index = 0; index < res.directAddrs.length; index++) {
                    const address = res.directAddrs[index];
                    const downline = res.downlineAmounts[index];
                    const personal = res.personalAmounts[index];
                    directList.value.push({ address, downline, personal })
                }
                setatTeam.total = res.total
            } catch (error) {
                directList.value = []
            }
        }
        const copy = async (id: string) => {
            const clipboard = new Clipboard(id);
            clipboard.on("success", () => {
                showToast(t("layout.success"));
                clipboard.destroy();
            });
            clipboard.on("error", () => {
                showToast(t("layout.fail"));
                clipboard.destroy();
            });
        };
        const sendGetTeamReward = async (id) => {
            loading.value[id] = true;
            try {
                await lpMineModule.getTeamReward();
                loadData();
                showDialog({ title: `${t("layout.success")}` })
            } catch (error) { }
            loading.value[id] = false
        }
        const sendGetNodeReward = async (id) => {
            loading.value[id] = true;
            try {
                await lpMineModule.getNodeReward();
                loadData();
                showDialog({ title: `${t("layout.success")}` })
            } catch (error) { }
            loading.value[id] = false
        }
        const loadData = async () => {
            loadTeam()
            lpMineModule.nodeNum().then(res => {
                nodeNum.value = res
            })
            lpMineModule.userReward().then(res => {
                userReward.value = res
            })
            NFTModule.dividends().then(res => {
                dividends.value = res
            })
            await IDOModule.contractInfo().then(res => {
                contractInfo.value = res

            })
            await lpMineModule.userInfo().then(res => {
                userInfo.value = res
            })

        }
        watch(
            () => UserModule.userAddr,
            (newUserAddr: string) => {
                if (newUserAddr) {
                    loadData();
                }
            },
            { immediate: true }
        );
        return {
            setatTeam,
            nodeNum,
            userReward,
            loading,
            userInfo,
            dividends,
            directList,
            contractInfo,
            loadTeam,
            formatAddress,
            copy,
            fromWei,
            sendGetTeamReward,
            sendGetNodeReward,
            UserModule
        }
    }
})
</script>

<template>
    <div class="page">
        <div class="nft-box">
            <div class="nft"><img src="@/assets/image/image3.png" alt="" srcset=""></div>
            <div class="foot">
                <div class="label">{{ $t("layout.NFTcumulativedividends") }} {{ fromWei(dividends) }}</div>
            </div>
        </div>
        <div class="border">
            <div class="myLink">
                <div class="address">{{ $t("layout.Mypromotionlink") }}：{{ formatAddress(UserModule.userAddr, 10) }}</div>
                <img src="@/assets/image/image16.png" alt="" class="userAddr" @click="copy('.userAddr')"
                    :data-clipboard-text="UserModule.userAddr">
            </div>
        </div>
        <div class="total-box">
            <ul>
                <li>
                    <div class="label">{{ $t("layout.communitynode") }}</div>
                    <div class="value">{{ fromWei(userReward[0]) }}</div>
                    <van-button type="primary" :loading="loading[0]" :disabled="!fromWei(userReward[0])"
                        @click="sendGetTeamReward(0)">{{ $t("layout.receive")
                        }}</van-button>
                </li>
                <li>
                    <div class="label">{{ $t("layout.supernode") }}</div>
                    <div class="value">{{ fromWei(userReward[1]) }}</div>
                    <van-button type="primary" :loading="loading[1]" :disabled="!fromWei(userReward[1])"
                        @click="sendGetNodeReward(1)">{{ $t("layout.receive")
                        }}</van-button>
                </li>
            </ul>
            <div class="row">
                <!-- <div class="cell">
                    <div class="label">DAO{{ $t("layout.Numberofmemberaddresses") }}</div>
                    <div class="vlaue">~</div>
                </div> -->
                <div class="cell">
                    <div class="label">{{ $t("layout.Numberofvalidinvitationaddresses") }}</div>
                    <div class="vlaue">{{ setatTeam.total }}</div>
                </div>
                <div class="cell">
                    <div class="label">DAO{{ $t("layout.Totalmembercontribution") }}</div>
                    <div class="vlaue">{{ fromWei(userInfo[7]) }}</div>
                </div>
            </div>
        </div>
        <div class="myInvitation">
            <div class="name">{{ $t("layout.myinvitation") }}</div>
            <ul>
                <li>
                    <span>{{ $t("layout.address") }}</span>
                    <span>{{ $t("layout.Personalpledge") }}</span>
                    <span>{{ $t("layout.Teamstaking") }}</span>
                </li>
                <li v-for="(item, index) in directList" :key="index">
                    <span>{{ formatAddress(item.address) }}</span>
                    <span>{{ fromWei(item.personal) }}</span>
                    <span>{{ fromWei(item.downline) }}</span>
                </li>
            </ul>
            <van-pagination v-model="setatTeam.pageNum" :total-items="setatTeam.total" :show-page-size="5"
                :items-per-page="setatTeam.pageSize" force-ellipses @change="loadTeam" />
        </div>
        <div class="manage">
            <div class="name">DAO{{ $t("layout.Membermanagement") }}</div>
            <div class="row">
                <div class="cell">
                    <div class="label"><img src="@/assets/image/image18.png" alt="">{{ $t("layout.communitynode") }}</div>
                    <div class="value">{{ contractInfo[1] }}</div>
                </div>
                <div class="cell">
                    <div class="label"><img src="@/assets/image/image17.png" alt="">{{ $t("layout.supernode") }}</div>
                    <div class="value">{{ nodeNum || 0 }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
.page {
    padding: 0 15px 15px 15px;

    .nft-box {
        margin-top: 30px;
        margin-bottom: 20px;

        .nft {
            display: flex;
            justify-content: center;

            img {
                width: 218px;
                height: 242px;
            }
        }

        .foot {
            position: relative;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            margin-top: 5px;
            margin: 0 auto;
            text-align: center;
            width: 317px;
            height: 92px;
            background: url("@/assets/image/image4.png") center/cover no-repeat;

            .label {
                display: inline-block;
                padding: 11px 58px;
                font-size: 12px;
                font-weight: 500;
                color: #02032D;
                background: linear-gradient(90deg, #F3B085 0%, #FBF4F1 100%);
                border-radius: 8px;
            }

        }
    }

    .myLink {
        background: linear-gradient(90deg, #01012B 0%, #32437B 100%);
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 45px;
        padding: 0 15px;

        img {
            width: 15px;
            height: 15px;
        }
    }

    .border {
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;

    }

    .total-box {
        margin-top: 17px;

        ul {
            display: flex;
            justify-content: space-between;

            li {
                width: 167px;
                height: 152px;
                text-align: center;
                border-radius: 8px;
                border: 1px solid rgba(255, 255, 255, 0.1);

                .label {
                    padding-top: 20px;
                    color: #FFD7B2;
                }

                .value {
                    margin-top: 10px;
                    font-size: 25px;
                    font-weight: bold;
                    color: #FFFFFF;
                }

                .van-button {
                    display: block;
                    margin: 20px auto 0 auto;
                    width: 135px;
                    height: 45px;
                    border-radius: 8px;
                }
            }
        }

        .row {
            margin-top: 12px;
            border-radius: 8px;
            padding: 0 15px;
            border: 1px solid rgba(255, 255, 255, 0.1);

            .cell {
                padding: 20px 0;
                display: flex;
                align-items: center;
                justify-content: space-between;
                border-bottom: 1px solid rgba(255, 255, 255, 0.1);

                &:last-child {
                    border: none;
                }

                .label {
                    color: #FFDBC4;
                }

                .value {
                    font-size: 15px;
                    font-weight: bold;
                    color: #FFBD91;
                }
            }
        }
    }

    .myInvitation {
        margin-top: 12px;
        padding: 20px 15px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;

        .name {
            font-size: 20px;
        }

        ul {
            margin-top: 13px;

            li {
                padding: 8px 0;
                display: flex;
                justify-content: space-between;
                align-items: center;
                text-align: center;

                span {
                    flex: 1;
                }

                &:first-child {
                    color: #FFD7B2;
                }
            }
        }
    }
}

.manage {
    margin-top: 12px;
    padding: 20px 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;

    .name {
        font-size: 20px;
    }

    .row {
        margin-top: 12px;
        border-radius: 8px;
        padding: 20px 15px;
        border: 1px solid rgba(255, 255, 255, 0.1);

        .cell {
            padding: 13px 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 8px;

            &:last-child {
                margin-top: 12px;
            }

            .label {
                color: #FFDBC4;
                display: flex;
                align-items: center;

                img {
                    margin-right: 6px;
                    width: 20px;
                    height: 20px;
                }
            }

            .value {
                font-size: 15px;
                font-weight: bold;
                color: #FFBD91;
            }
        }
    }
}
</style>
